import React from 'react';
import { Form, Input, Button, DatePicker } from 'antd'
// 引入样式
import './index.less'

const OrderAdd = (props) => {
    const { form } = props;
    const { getFieldDecorator } = form;
    const layout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 16 },
    };
    const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };
    // 提交
    const submit = (event) => {
        console.log(event)
        event.preventDefault()
        form.validateFields((err, values) => {
            console.log(err, values)
        })
    }
    // 取消
    const cancel = () => {

    }
    return (
        <div className='add-order'>
            <Form
                {...layout}
                onSubmit={submit}
            >
                <Form.Item label='标题' name='title'>
                    {getFieldDecorator("title", {
                        rules: [
                            {
                                required: true,
                                message: "请输入标题",
                            },
                        ],
                        initialValue: "", // 初始值
                    })(<Input className='input' placeholder='请输入标题' />)}
                </Form.Item>
                <Form.Item label='客户' >
                    {getFieldDecorator("customer", {
                        rules: [
                            {
                                required: true,
                                message: "请输入客户",
                            },
                        ],
                        initialValue: "", // 初始值
                    })(<Input className='input' placeholder='请输入客户' />)}
                </Form.Item>
                <Form.Item label='购买量' name='sale'>
                    {getFieldDecorator("sale", {
                        rules: [
                            {
                                required: true,
                                message: "请输入购买量",
                            },
                        ],
                        initialValue: "", // 初始值
                    })(<Input className='input' placeholder='请输入购买量' />)}
                </Form.Item>
                <Form.Item label='购买时间' name='date'>
                    {getFieldDecorator("date", {
                        rules: [
                            {
                                required: true,
                                message: "请输入购买时间",
                            },
                        ],
                    })(<DatePicker style={{width:'100%'}}/>)}
                </Form.Item>
                <Form.Item {...tailLayout}>
                    <Button type='primary' htmlType='submit'>确认</Button>
                    <Button className='cancel' onClick={cancel}>取消</Button>
                </Form.Item>
            </Form>
        </div>
    )
}

const WrapOrderAdd = Form.create()(OrderAdd)

export default WrapOrderAdd